/**
 * Created by sunguodong on 2021/12/31.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import * as esriLoader from 'esri-loader';
import { Button } from "antd";
import icon from "../../image/cat1.png";
import icon3g from "../../image/cat1.png";
import icon4g from "../../image/cat1.png";
import icon5g from "../../image/cat1.png";
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);

export const MapAdministrativeAreaOutline: React.FC = () => {
    function componentDid() {
        var map: any, dialog: any;
        esriLoader.loadModules([
            "esri/map",
            "esri/layers/FeatureLayer",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/renderers/SimpleRenderer",
            "esri/graphic",
            "esri/lang",
            "esri/Color",
            "dojo/number",
            "dojo/dom-style",
            "dijit/TooltipDialog",
            "dijit/popup",
            "dojo/domReady!"
        ]).then(([Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer, Graphic, esriLang, Color, number, domStyle, TooltipDialog, dijitPopup]) => {
            map = new Map('mapCon', {
                basemap: 'topo-vector',
                center: [-80.94, 33.646],
                zoom: 7,
                slider: false
            });
            var southCarolinaCounties = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
                mode: FeatureLayer.MODE_SNAPSHOT,
                outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
            });
            southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");
            var symbol = new SimpleFillSymbol(
                SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(
                  SimpleLineSymbol.STYLE_SOLID,
                  new Color([255,255,255,0.35]),
                  1
                ),
                new Color([125,125,125,0.35])
            );
            southCarolinaCounties.setRenderer(new SimpleRenderer(symbol));
        map.addLayer(southCarolinaCounties);

        map.infoWindow.resize(245,125);

        dialog = new TooltipDialog({
          id: "tooltipDialog",
          style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
        });
        dialog.startup();

        var highlightSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255,0,0]), 3
          ),
          new Color([125,125,125,0.35])
        );

        //close the dialog when the mouse leaves the highlight graphic
        map.on("load", function(){
          map.graphics.enableMouseEvents();
          map.graphics.on("mouse-out", closeDialog);

        });

        //listen for when the onMouseOver event fires on the countiesGraphicsLayer
        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
        southCarolinaCounties.on("mouse-over", function(evt: any){
            var t = "<b>${NAME}</b><hr><b>2000 Population: </b>${POP2000:NumberFormat}<br>"
                + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br>"
                + "<b>2007 Population: </b>${POP2007:NumberFormat}<br>"
                + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}";

            var content = esriLang.substitute(evt.graphic.attributes,t);
            var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
            map.graphics.add(highlightGraphic);

            dialog.setContent(content);

            domStyle.set(dialog.domNode, "opacity", 0.85);
            dijitPopup.open({
                popup: dialog,
                x: evt.pageX,
                y: evt.pageY
            });
        });

        function closeDialog() {
          map.graphics.clear();
          dijitPopup.close(dialog);
        }
        }).catch(err => {
            console.error(err)
        })
    }
    
    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {}

    useEffect(() => () => {
        return componentWillUn();
    }, []);

    return (
        <div id="mapCon"></div>
    )
}
